<template>
  <div class="onion-banner">
    <van-swipe :autoplay="3000" class="swiper" v-if="isShow">
      <van-swipe-item class="swiper-list" 
      v-for="(image, index) in images" 
      :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

      <van-swipe :autoplay="3000" class="swiper">
      <van-swipe-item class="swiper-list" 
      v-for="item in $store.state.home.bannerList" 
      :key="item.id">
        <img :src="item.src" />
      </van-swipe-item>
    </van-swipe>

  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { Lazyload } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
        "https://img01.yzcdn.cn/vant/apple-3.jpg",
      ],
      isShow : false,
    };
  },
  method:{
    getBanner(){
       if(this.$store.state.length == 0){
         this.isShow = true;
       }
    }
  },
  create(){
    this.getBanner();
  }
};
</script>

<style lang="less">
.onion-banner {
  height: 200px;
  margin-bottom: 10px;
  background: chocolate;
}
.swiper{
    display: flex;
    height: 200px;
    .swiper-list{
      height: 200px;
      img{
          width: 100%;
          height: 100%;
          display: block;
      }
    }
}

</style>